<template>
  <div>
    <button @click="printCood()">打印</button>
    <canvas id="canvas" width="1500" height="1500" style="width: 70vw;height: 70vh;">
    </canvas>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        canvas: null,
        started: false
      }
    },
    mounted() {
      this.canvas = new fabric.Canvas('canvas')
      this.canvas.clear()
      setTimeout(() => {
        this.canvas.renderAll()
        this.fabricEvent()
      }, 500);
    },
    methods: {
      fabricEvent() {
        this.canvas.on({
          'mouse:down': e => {
            // if (this.isPizhu) {
            this.mousedown(e)
            // } else {
            //   this.panning = true
            //   this.canvas.selection = false
            // }
          },
          'mouse:move': e => {
            // if (this.isPizhu) {
            this.mousemove(e)
            // } else {
            //   if (this.panning) {
            //     const delta = new fabric.Point(e.e.movementX, e.e.movementY)
            //     console.log(delta)
            //     this.canvas.relativePan(delta)
            //   }
            // }
          },
          'mouse:up': e => {
            // if (this.isPizhu) {
            this.mouseup(e)
            // } else {
            //   this.panning = false
            //   this.canvas.setActiveObject(this.canvas.getObjects()[this.canvas.getObjects().length - 1])
            //   this.canvas.renderAll()
            // }
          },
          'mouse:wheel': e => {
            this.mousewheel(e)
          }
        });
      },
      mousewheel(e) {
        // var delta = event.deltaY;
        // var zoom = this.canvas.getZoom();
        // zoom *= 0.999 ** delta;
        // if (zoom > 5) zoom = 5;
        // if (zoom < 0.01) zoom = 0.01;
        // this.canvas.setZoom(zoom);
      },
      mousedown(e) {
        this.started = true
        const mouse = this.canvas.getPointer(event.e)
        this.x = mouse.x
        this.y = mouse.y
        const square = new fabric.Rect({
        
          width: 1,
          height: 1,
          left: mouse.x,
          top: mouse.y,
          stroke: 'red',
          strokeWidth: 3,
          fill: '',
          borderColor: 'red'
        })
        square.hasBorders = false
        square.hasControls = false
        square.lockMovementX = true
        square.lockMovementY = true
        this.canvas.add(square)
        this.canvas.renderAll()
        this.canvas.setActiveObject(square)
      },
      mousemove(e) {
        if (!this.started) {
          return false
        }
        const mouse = this.canvas.getPointer(event.e)
      
        const x = Math.min(mouse.x, this.x)
        const y = Math.min(mouse.y, this.y)
        const w = Math.abs(mouse.x - this.x)
        const h = Math.abs(mouse.y - this.y)
      
        if (!w || !h) {
          return false
        }
      
        const square = this.canvas.getActiveObject()
        square.set('top', y).set('left', x).set('width', w).set('height', h)
        this.canvas.renderAll()
      },
      mouseup(e) {
        if (this.started) { // 有标记
          this.started = false
          const square = this.canvas.getActiveObject()
          console.log(square.getCoords()[0])// 左上角坐标 90 156
          if (square.width < 5 && square.height < 5) {
            this.canvas.remove(square)
          } else {
            this.pizhuDialog = true
          }
        }
      },
      printCood() {
        const square = this.canvas.getObjects()[this.canvas.getObjects().length - 1]
        console.log(`all point is`, square)
        console.log(`all point is`, square.getCoords())
        console.log(`all x is`, square.getCoords().map(v =>v.x))
        console.log(`all y is`, square.getCoords().map(v =>v.y))
        console.log(`min x is ${Math.min(...square.getCoords().map(v =>v.x))}`)
        console.log(`max x is ${Math.min(...square.getCoords().map(v =>v.y))}`)
        console.log(`left:${square.left},top:${square.top},width:${square.width},height:${square.height}`)
      }
    }
  }
</script>

<style>
</style>
